<template>
	<div class="kk-wrap-container" v-loading="loading">
		<div class="kk-wrap">
			<div class="kk-wrap-top">
				<div class="kk-wrap-item">
					<div class="kk-wrap-top-left">
						<img class="kk-star" src="~assets/images/star.png">
						<span class="kk-shop-cate">商品类目:</span>
					</div>
					<div class="kk-wrap-top-right cascader-option">
					  <el-cascader
							v-model="selectedOptions"
							:options="shopName"
							@change="handleChange">
						</el-cascader>
					</div>
				</div>
				<div class="kk-wrap-item">
					<div class="kk-wrap-top-left">
						<span class="kk-shop-cate cate-indent">一键导入:</span>
					</div>
					<div class="kk-wrap-top-right">
						<input class="top-text" type="text" placeholder="请粘贴“我要卖货”商品库里的商品详情页链接" v-model="link">
						<div 
							class='top-import'
							@click="oneImport">一键导入
						</div>
					</div>
				</div>
				<div class="kk-wrap-item">
					<div class="kk-wrap-top-left">
						<img class="kk-star" src="~assets/images/star.png">
						<span class="kk-shop-cate">商品名称:</span>
					</div>
					<div class="kk-wrap-top-right">
						<input class="top-text" v-model="title" type="text" placeholder="请输入商品名称">
					</div>
				</div>
			</div>
		</div>
		<div class="kk-wrap-bottom">
			<div class="kk-wrap-update-item">
				<div class="kk-wrap-update-left">
					<img class="kk-star1" src="~assets/images/star.png">
					<span class="kk-shop-cate cate-indent">商品主图:</span>
				</div>
				<div class="kk-wrap-update-right">
					<el-upload
						:action="imgurl"
						list-type="picture-card"
						:file-list="imageUrls"
						accept=".jpg,.jpeg,.png"
						:limit="9" 
						:on-preview="handlePictureCardPreview"
						:on-success="uploadImgSuccess"
						:on-error ="uploadImgFail"
						:on-remove="handleRemove"
						:before-upload="beforeAvatarUpload"
						:on-exceed="uploadExceed"
						:headers="headers"
					>
						<i class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过2M,图片最大限量为9张</div>
					</el-upload>
					<el-dialog	
					:visible.sync="dialogVisible"
					> 
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div> 
			</div>
			<div class="kk-wrap-update-item">
				<div class="kk-wrap-update-left">
					<img class="kk-star1" src="~assets/images/star.png">
					<span class="kk-shop-cate cate-indent">商品详图:</span>
				</div>
				<div class="kk-wrap-update-right">
					<el-upload
						:action="imgurl"
						list-type="picture-card"
						:file-list="detailUrls"
						accept=".jpg,.png"
						:limit="20" 
						:on-preview="handlePictureCardPreview1"
						:on-success="uploadImgSuccess1"
						:on-error ="uploadImgFail1"
						:on-remove="handleRemove1"
						:before-upload="beforeAvatarUpload1"
						:on-exceed="uploadExceed"
						:headers="headers"
					>
						<i class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M,图片最大限量为20张</div>
					</el-upload>
					<el-dialog 
						:visible.sync="dialogVisible1"
					>
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div> 
			</div>
			<div class="kk-wrap-bottom-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star1" src="~assets/images/star.png">
					<span class="kk-shop-cate cate-indent">商品规格:</span>
				</div>
				<div class="kk-wrap-bottom-right">
					<div>
            <el-button type="primary" size="mini" icon="el-icon-plus" v-if="show = false">新增规格</el-button>
						<div class="regular-container" v-if="show = true">
							<div class="regular-header">
								<div class="regular-component">
									<el-select  v-model="text1" :placeholder="placeText" @change="selectText($event)">
										<el-option
											v-for="item in optionReg"
											:key="item.propId"
											:label="item.propName"	
											:value="item.propId">
										</el-option>
									</el-select>
								</div>
							</div>
							<div class="regular-add-wrap">
								<ul class="regular-add-list">
									<li class="regular-add-item" v-for="(item,index) in addValueData1" :key="index">
										<el-checkbox 
											:label="item.propValueName" 
											name="type" 
											v-model="item.checked"
											@change="checkboxChange(item)"
										>
										</el-checkbox>
										<div class="close-img" @click="delImg(item.propValueId,index)">
											<img src="~assets/images/del-btn.png">	
										</div>
									</li>
								</ul>
							</div>
							<div class="regular-bottom">
                <el-input class="regular-bottom-input" v-model="text" placeholder="请输入内容"></el-input>
								<el-button 
									class="btn-left" 
									type="info" 
									size="mini" 
									icon="el-icon-plus" 
									:disabled = disabled
									plain
									@click="addRegularValue"
								>新增规格值
								</el-button>
							</div>
						</div>
					</div>
					<div class="red-text">温馨提示：如有颜色、尺码等多种规格，请添加规格名（举例：规格名：颜色、规格值：红色、绿色等）</div>
				</div>
			</div>
			<div class="kk-wrap-bottom-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star1" src="~assets/images/star.png">
					<span class="kk-shop-cate cate-indent">规格信息:</span>
				</div>
				<div class="kk-wrap-bottom-right">
					<ul>
						<li class="regular-item">
						<div class="regular">{{text2}}</div>
						<div class="save">库存</div>
						<div class="price">单价</div>	
						<div class="sku-encode">sku编码</div>
						</li>
						<li class="regular-item one" v-for="(item,index) in regularInfo" :key="index">
							<div class="regular">
								<span>{{item.skuSpecification}}</span>
							</div>
							<div class="save">
								<el-input class="el-width1" v-model="item.skuStock"></el-input>
							</div>
							<div class="price">
								<el-input class="el-width1" v-model="item.skuSalePrice"></el-input>
							</div>
							<div class="sku-encode">
								<el-input class="el-width2" v-model="item.skuNick"></el-input>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="kk-wrap-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star" src="~assets/images/star.png">
					<span class="kk-shop-cate">商品描述:</span>
				</div>
				<div class="kk-wrap-top-right shop-detail">
					 <el-input class="kk-wrap-textarea-w" type="textarea" v-model="details" placeholder="介绍一下你的商品吧, 最多100字"></el-input>
				</div>
			</div>
			<div class="kk-wrap-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star" src="~assets/images/star.png">
					<span class="kk-shop-cate">售后服务:</span>
				</div>
				<div class="kk-wrap-top-right shop-detail">
					<div class="day-component">
						<el-select  v-model="saleServer.value" :placeholder="placeText" @change="serverHandler($event)">
							<el-option
								v-for="item in saleServer"
								:key="item.id"
								:label="item.value"	
								:value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div 
				class='commit'
				@click="commit"
			>提交
			</div>
		</div>
	</div> 
</template>

<script>
export default {
 	async fetch({store}) {
    await store.commit('setKuaiShou', 0); //初始化的时候设置跳转到默认页面	
  },
  layout: 'internalouts',
  data(){
		return{
			flag:false,	//控制导入状态
			cmtShow:false,	//控制提交按钮状态的
			dialogImageUrl:"",//预览图片的
			dialogVisible: false, //控制上传图片
			dialogVisible1: false, //控制上传图片
			value: [],
			show:false,
			optionReg: [], //下拉选择规格
			selectedOptions: [], //级联选择器下拉菜单
			shopName: [], //级联选择器下拉菜单绑定的值
			addValueData1:[], //添加到新增值的数组
			checked:false,
			propId:'', // 删除和添加需要传递的规格ID
			text:'', //绑定新增值得表单
			text1:'', //选择v-model绑定的下方增加的标题规格文本，比如颜色，尺寸
			// repeat:'',//重复控制
			placeText:'请选择',// 规格下拉的placeholder
			saleServer:[  //售后服务写死
				{	id:0,	value:'请选择',},
				{ id:1, value:'支持7天无理由退货',},
				{	id:4,	value:'不支持7天无理由退货',},
				{	id:5,	value:'支持7天无理由退货(拆封后不支持)',},
				{	id:6,	value:'支持7天无理由退货(激活后不支持)',},
				{	id:7,	value:'支持7天无理由退货(安装后不支持)',},
				{	id:8,	value:'支持7天无理由退货(定制类不支持)',},
				{	id:9,	value:'支持7天无理由退货(使用后不支持)',},
			],
			/* 快手商品信息新增需要传递的参数 begin */
			cateId: '', //商品分类id
			details:'', //表单绑定的商品详情描述
			detailUrls: [], //商品详图
			goodsId : '', //商品ID	
			imageUrls: [], //商品主图
			limitCount : '', //限购数量
			purchaseLimit : 0, //是否添加限购 1是 0否	
			refundRule:'', //售后服务的退款规则： 1，7天无理由退款； 2，可协商退款。
			// shopId : '1923987201', //店铺ID 暂时写死
			regularInfo:[],//规格值
			title:'', //表单绑定的商品名称
			/* 快手商品信息新增需要传递的参数 end */
			limit:[ //是否添加限购 1是 0否
				{
					id:1,
					text:'是',
				},
				{
					id:2,
					text:'否',
				},
			],
			link:'', //商品详情的链接
			// link:'http://localhost:9003/goodsDetail?id=1', //商品详情的链接
			imgurl: `${process.env.APIHOST}/common/fileUpload`, // 图片上传的地址
			/*售后服务的 */
			// server:'',//售后服务绑定的值
			flag :false,//控制提交的
			// ksAccount:{},
			headers: {
				token: ''
			},
			loading:false,
		}	
	},
	created(){
	},
	computed:{
		disabled(){
			return !this.cateId || !this.propId //如果没有id，则禁用
		},
		text2(){ //计算规格
			return this.text1 ? this.text1 : '规格'
		},
		ksAccount1(){
			return this.$store.state.ksAccount1
		}
	},
  methods:{
		oneImport(){//一键导入
			this.linkAnalysis(); //调用链接信息分析
		},
		commit(){//提交按钮
			this.ksMerchantItemAdd();
		},
		serverHandler(id){ //售后服务下拉change事件
			 this.refundRule = id //设置售后服务的ID
		},
		// //商品主图
		handleRemove(file, fileList) { //删除图片
			for (const key in this.imageUrls) {
				const element = this.imageUrls[key];
				if (element.uid == file.uid) {
					this.imageUrls.splice(key,1)
				}
			}
		},
		uploadImgSuccess(response, file,fileList) { //图片上传成功操作
			let imgObj = {
				status: file.status,
				uid: file.uid,
				url: response.obj
			}
			this.imageUrls.push(imgObj)
		},
		handlePictureCardPreview(file) { //点击放大图片
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		uploadImgFail(res,file){ //图片上传失败时的回调
			this.$message.warning('上传失败')
		},
		beforeAvatarUpload(file){ //商品主图图片上传的限制大小
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		// 商品详图
	  handleRemove1(file, fileList) { //删除图片时的回调
			for (let i in this.detailUrls) { //删除图片操作
				for (let k in this.detailUrls[i]) {
					if (this.detailUrls[i][k] == file.uid) {
						delete this.detailUrls[i];
						break;
					}
				}
			}
		},
		uploadImgSuccess1(response, file,fileList) { //图片上传成功操作
			let imgObj = {
				status: file.status,
				uid: file.uid,
				url: response.obj
			}
			this.detailUrls.push(imgObj)
		},
		handlePictureCardPreview1(file) { //商品详图放大预览图
			this.dialogImageUrl = file.url;
			this.dialogVisible1 = true;
		},
		uploadImgFail1(res,file){ //图片上传失败时的回调
			this.$message.warning('上传失败')
		},
		beforeAvatarUpload1(file){ //商品详图图片上传的限制大小
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		uploadExceed(files,fileList){ //图片上传的限制个数hook函数
			this.$message({
				message:'图片最大上传限量为1张',
				type:'warning',
				duration:1000,
			})
		},
		uploadExceed1(files,fileList){ //图片上传的限制个数hook函数
			this.$message({
				message:'图片最大上传限量为20张',
				type:'warning',
				duration:1000,
			})
		},
		handleChange(value) { //级联选择器change触发事件
			this.regularInfo = [];
			this.addValueData1 = [];
			this.text1 = ""; //清空文本内容
			for(let i = 0;i < value.length; i++){
				if(value[i] === value[value.length -1]){ //拿到value中的最后一个id
					this.cateId = value[i]
				}
			}
			this.getCategoryProps();	//调用商品类型获取规格信息
		},
		addRegularValue(){	//新增规格值
			if(this.text == "") return
			this.addPropValue() //调用商品规格值新增
		},
		delImg(id,index){ //删除规格值
		    this.propId = id; //传递propValueId
				this.removePropValue(); //调用删除接口
				this.addValueData1.splice(index,1); //前端删除
				this.regularInfo.splice(index,1); //前端删除
		},
		selectText(e){ //下拉框的change事件
      let obj = {};
      obj = this.optionReg.find((item)=>{//这里的userList就是上面遍历的数据源
				return item.propId === e;//筛选出匹配数据
      });
			this.text1 = obj.propName; //拿到propName 设置给规格下方的规格标题text1
			this.propId = e; //拿到规格ID,设置给propId
			for(var i = 0;i<this.optionReg.length;i++){
				var item = this.optionReg[i]; //拿到optionReg的每个索引
				if(item.id = e){ //id===id
					this.addValueData1 = item.propValueList; //让上方新增的规格值，等于获取到的数据，保存数据，页面刷新不消失
				}
			}
		},
		checkboxChange(item,index){ //复选框的change事件
      if(item.checked){
				this.regularInfo.push({
					propId:item.propValueId,
					skuSpecification:item.propValueName, //把表单的值规格值赋给下方的规格信息中的规格值
				})
			}else{
				for(var i=0;i< this.regularInfo.length;i++){
					var old = this.regularInfo[i];
					if(old.propId === item.propValueId){ //下方id等于上方id
						this.regularInfo.splice(i,1);
					}
				}
			}
		},	
		allCategoryInit(){	//商品规格数据初始化
			this.$axios.$post('allCategoryInit').then(res => {
				if(res.status === 200 ){
					this.shopName = this.getTreeData(res.obj)
				}else{
					this.$message.warning(res.msg)
				}
			})
				.catch(error => {
					this.$message.warning('请求失败')
				})
	  },
		getTreeData(data){ //递归判断出级联选择器下的children空数
      for(var i=0;i<data.length;i++){
        if(data[i].children.length<1){
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
		},
		getCategoryProps(){	//商品类型获取规格信息
		  let params = {
				categoryId:this.cateId,
			}
			this.$axios.$post('getCategoryProps',params).then(res => {
				if(res.status === 200 ){
					this.optionReg = res.obj; //拿到规格信息的数据，设置给optionReg
				}else{
					this.$message.warning(res.msg)
				}
			})
				.catch(error => {
					this.$message.warning('请求失败')
				})
		},
		addPropValue(){ //商品规格值新增
			let params = {
				categoryId:this.cateId, //商品类型Id
				propId:this.propId, //规格Id
				propValueName:this.text, //规格值名称
			}
			this.$axios.$post('addPropValue',params).then(res => {
				if(res.status === 200 ){
					this.addValueData1.push({ //status ===200 在push 携带ID push的时候
						propValueId:res.obj, //删除的时候传的规格值ID
						propValueName:this.text //把表单的值新增规格值赋给上方的新增规格值
					})
					this.text = ""; //添加完清空表单
				}else{
					this.$message.warning(res.msg)
				}
			})
				.catch(error => {
					this.$message.warning('请求失败')
				})
		},
		removePropValue(){	//商品规格值删除
			let params = {
				propValueId : this.propId, //传递规格Id
			}
			this.$axios.$post('removePropValue',params).then(res => {
				if(res.status === 200 ){
				}else{
					this.$message.warning(res.msg)
				}
			})
				.catch(error => {
					this.$message.warning('请求失败')
				})
		},
		linkAnalysis(){ //链接信息分析
     	let params = {
				link: this.link, //传递商品详情链接
			}
			this.$axios.$post('linkAnalysis',params).then(res => {
				this.imageUrls = []; //清空数组
				this.detailUrls = []; //清空数组
				if(res.status === 200 ){
					let mainPic = res.obj.imageUrls;
					let detialPic = res.obj.detailUrls;
					//给所有的商品主图图片统一加一个url属性，分别放在一个数组对象中
					for(let i= 0;i<mainPic.length;i++){
						this.imageUrls.push({'url':mainPic[i]});
					}
					//给所有的商品详情图片统一加一个url属性，分别放在一个数组对象中
					for(let i= 0;i<detialPic.length;i++){ 
						this.detailUrls.push({'url':detialPic[i]});
					}
					this.title = res.obj.title; //拿到商品名称
					this.details = res.obj.details; //拿到商品详情描述
					this.refundRule = res.obj.refundRule; //拿到商退款规则值
					this.goodsId = res.obj.id; //拿到商品ID值
					this.limitCount = res.obj.limitCount; //拿到限购数量
					this.purchaseLimit = res.obj.purchaseLimit; //拿到是否添加限购 1是 0否
					if(this.refundRule){
						this.saleServer.value = '支持7天无理由退货' //前端写死
					}
				}else{
					this.$message.warning(res.msg)
				}
			})
				.catch(error => {
					this.$message.warning('请求失败')
				}) 
		},
		ksMerchantItemAdd(){ //快手商品信息新增
		  this.loading = true;
			let mainImgs = [];
			let detailImgs = [];
			this.imageUrls.map(item => {
        mainImgs.push(item.url)
			})
			this.detailUrls.map(item => {
        detailImgs.push(item.url)
			})
			var skuInfos = JSON.parse(JSON.stringify(this.regularInfo));
			let params = {
				cateId : this.cateId, //商品类型ID
				platformId:this.ksAccount1.platformId, //平台ID
				details : this.details, //商品详情	
				detailsUrls : detailImgs, //商品详情图	
				goodsId : this.goodsId, //商品ID	
				imageUrls : mainImgs, //商品主图	
				limitCount : 0, //限购数量	
				purchaseLimit : '0', //是否添加限购 1是 0否
				refundRule : this.refundRule, //退款规则： 1，7天无理由退款； 2，可协商退款。
				shopId : this.ksAccount1.shopId, //店铺ID
				skuInfoParams:skuInfos, //规格值
				title : this.title,  //	商品标题
			}
			if(params.skuInfoParams.length <= 0){
				this.$message.warning('请输入规格信息')
				return;
			}
			var skuFlag = false;
			var priceFlag = false;
			var skuIdFlag = false;
			params.skuInfoParams.map(item => {
				var reg = /^[1-9]\d*$/; //只能输入数字
				var reg1 = /^\d+(\.\d{1,2})?$/; //整数和保留小数点两位
				var validSkuStock = item.skuStock;
				var validPrice = item.skuSalePrice;
				var validSkuNick = item.skuNick;
				if(!reg.test(validSkuStock)){
					skuFlag = true;
				}
				if(!reg1.test(validPrice)){
					priceFlag=true;
				}
				if(!validSkuNick){skuIdFlag=true;}	
				item.skuSalePrice = validPrice*100;
			})
			if(skuFlag){
				this.$message.warning('库存请输入正整数')
				return;
			}
			if(priceFlag){
				this.$message.warning('价格只能输入两位小数以内的数字')
				return;
			}
			if(skuIdFlag){
				this.$message.warning('请输入SKU编码')
				return;
			}
			let param = JSON.stringify(params)
			this.$axios.$post('ksMerchantItemAdd',param).then(res => {
				this.loading = false;
				if(res.status === 200 ){
					this.$message.success(res.msg)
					this.$router.push({
						path:'/multiPlat/kuaishou/manage',
					})
				}else{
					this.$message.warning(res.msg);
				}
			})
				.catch(error => {
					this.$message.warning('请求失败')
					this.loading = false;
				})
		}
	},
	mounted(){
		this.allCategoryInit();	//调用商品规格数据初始化
		this.headers.token = localStorage.getItem('token') ? localStorage.getItem('token') : '';
	},
}
</script>

<style scoped>
	.kk-wrap{
		background:#ffffff;
		overflow:hidden;
		border-radius:2px;
	}
	.kk-wrap-top{
		padding-bottom:20px;
	}
	.kk-wrap-item{
		display:flex;
		/* height:30px; */
		align-items:center;
		padding-left:20px;
		margin-top:20px;
	}
	.kk-wrap-top-left{
		margin-right:10px;
		display:flex;
		color:#666666
	}
	.kk-star{
		width:7px;
		height:7px;
		margin-right:1px;
		margin-top:4px;
	}
	.kk-star1{
		width:7px;
		height:7px;
		margin-right:-8px;
	}
	.select-width{
		width:354px;
		height:30px;
	}
  .select-width /deep/ .el-input__inner{
		height:30px;
		line-height:30px;
    padding: 0 12px 0 10px;
	}
	.select-width /deep/ .el-input__icon{
		line-height:30px;
	}
	.top-text{
		height:30px;
		text-indent:10px;
		width:354px;
		border:1px solid #e1e1e1;
		border-radius:2px;
		box-sizing:border-box;
	}
	.top-text:focus{
		border:1px solid #0096e6;
	}
	@media screen and (min-width:1200px){
		.top-text{
			width:557px;
		}
	}
	.top-import{
		width:70px;
		height:30px;
		line-height:30px;
		text-align:center;
		cursor:pointer;
		user-select:none;
		color:#333333;
		border-radius:15px;
		background:#0096e6;
		color: #fff;;
		margin-left:23px;
	}
	.top-import:hover{
		background:#66B1FF; 
	}
	.kk-wrap-top-right{
		display:flex;
	}
	.cascader-option /deep/ .el-cascader .el-input .el-input__inner{
		height:30px;
		width:354px;
	}
	@media screen and (min-width:1200px){
		.cascader-option /deep/ .el-cascader .el-input .el-input__inner{
			height:30px;
			width:557px;
		}
	}
	.cascader-option /deep/ .el-input__inner{
		padding:0 10px;
	}
	.cate-indent{
		text-indent:9px;
		white-space:nowrap;
	}
	.kk-wrap-bottom{
		margin-top:20px;
		background:#ffffff;
		overflow:hidden;
		padding-bottom:40px;
	}
	.kk-wrap-bottom-item{
		display:flex;
		align-items:center;
		padding-left:20px;
		margin-top:20px;
	}
	.kk-wrap-bottom-right{
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.red-text{
		width:200px;
		height:27px;
		font-size:12px;
		font-weight:400;
		color:rgba(231,53,71,1);
		margin-left:20px;
		line-height: 1.3;
    margin-top: -10px;
	}
	.top-regular{
		width:354px;
		height:140px;
		border:1px solid rgba(225,225,225,1);
		border-radius:4px;
		margin-right:20px;
		display:flex;
		justify-content:center;
		align-items:center;
		box-sizing:border-box;
		cursor:pointer;
	}
	.add-regular{
		display:flex;
		user-select:none;
	}
	.add-text{
		margin-left:5px;
	}
	.kk-wrap-update-item{
		height:100%;
		display:flex;
		align-items:center;
		padding-left: 20px;
		margin-top: 20px;
	}
	.kk-wrap-update-left{
		display:flex;
		justify-content:center;
		align-items:center;
		margin-right:10px;
	}
	.kk-wrap-update-right{
		border-radius:4px;
		display:flex;
		align-items:center;
		justify-content:center;
		box-sizing:border-box;
		cursor:pointer;
	}
	.kk-shop-cate{
		color:#666666;
		user-select:none;
	}
	.commit{
		width: 70px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		cursor: pointer;
		user-select: none;
		background:#0096e6;
		color: #fff;
		border-radius: 15px;
		margin-left: 96px;
		margin-top:40px;
	}
	
	.commit:hover{
		background:#66B1FF;
	}
	.kk-wrap-bottom .active{
		color:#ffffff;
		background:#0096e6;
	}
	input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
	/deep/ .el-upload--picture-card{
		background-color:#ffffff;
	}
	/* begin shopRegular */
	.regular-container{
		width:585px;
		border:1px solid rgb(221, 221, 221);
		border-radius:4px;
	}
	.regular-header{
		height:60px;
		background:#F8F8F8;
		display:flex;
		align-items:center;
		padding:10px 20px;
		box-sizing:border-box;
		margin-bottom: 22px;
	}
	.regular-component,.day-component{
		display:flex;
	}
	.day-component /deep/ .el-input__inner{
		width:585px;
	}
	.regular-add-wrap{
		display:flex;
		align-items:center;
		padding:10px 20px;
		box-sizing:border-box;
	}
	.regular-add-list{
    margin-bottom: 10px;
		display:flex;
		flex-wrap: wrap;
		margin-left: 5px;
	}
	.regular-add-item{
		display: flex;
    margin-left: 10px;
    align-items: center;
    justify-content: center;
		padding: 2px 4px 4px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
		margin-bottom:10px;
	}
	.del-btn{
		margin-left:5px;
	}
	.close-img{
		width: 13px;
	height: 13px;
    margin-left: 5px;
    margin-top: 3px;
    cursor: pointer;
	}
	.close-img img{
		width:100%;
		height:100%;
	}
	.regular-bottom{
		display:flex;
		padding:10px 20px;
	}
	.regular-bottom-input{
		width:150px;
	}
  .regular-bottom-input /deep/ .el-input__inner{
		height:30px;
	}
	.btn-left{
		margin-left:20px
	}
	/* end shopRegular */
	/* begin regular */
	.regular-item{
		display:flex;
		height:37px;
		align-items:center;
		justify-content:center;
		text-align:center;
	}
	.regular{
		width:110px;
	}
	.save{
		width:145px;
	}
	.price{
		width:130px;
	}
	.sku-encode{
		width:200px;
	}
	.regular-item:nth-child(odd){
		background:#FAFAFA;
	}
	.one{
		height:70px;
	}
	.el-width1{
		width:88px;
	}
  .el-width2{
		width:189px;
	}
	.el-width1 /deep/ .el-input__inner,.el-width2 /deep/ .el-input__inner{
		height:30px;
	}
	/* end regular */
	.kk-wrap-textarea-w{
		width:585px;
		height:100px;
	}
	
</style>
